<template>
  <div>
    <div class="quick">
      <p class="p1">快速备注</p>
      <div>
        <div style="margin-top: 20px">
          <el-radio-group v-model="radio1" @change="change">
            <el-radio-button label="不要辣"></el-radio-button>
            <el-radio-button label="少点辣"></el-radio-button>
            <el-radio-button label="多点辣"></el-radio-button>
          </el-radio-group>
        </div>
        <el-radio-group v-model="radio2" @change="change">
          <el-radio-button label="不要香菜"></el-radio-button>
        </el-radio-group>
      </div>

      <el-radio-group v-model="radio3" @change="change">
        <el-radio-button label="不要洋葱"></el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="radio4" @change="change">
        <el-radio-button label="多点醋"></el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="radio5" @change="change">
        <el-radio-button label="多点葱"></el-radio-button>
      </el-radio-group>
      <div>
        <el-radio-group v-model="radio6" @change="change">
          <el-radio-button label="去冰"></el-radio-button>
          <el-radio-button label="少冰"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="other">
      <p class="p1">其他备注</p>
      <textarea type="text" placeholder="请输入备注内容(可不填)"  v-model="msg"></textarea>
    </div>
    <router-link to='/commitOrder'>
      <div class="submit">确定</div>
    </router-link>  
  </div>
</template>

<script>
  import Cookie from "js-cookie";
  export default {
    name: "noteOrder",
    data() {
      return {
        radio1: '',
        radio2: '',
        radio3: '',
        radio4: '',
        radio5: '',
        radio6: '',
        tag: "",
        msg:""
      };
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$store.commit("changeTitle", "订单备注");
      });
    },
    methods: {
      change() {
        this.tag = this.radio1 + this.radio2 + this.radio3 + this.radio4 + this.radio5 + this.radio6+this.msg;
        Cookie.set("carTag", this.tag);
      }
    },
  }
</script>

<style lang="less" scoped>
  .quick {
    background-color: #fff;
    padding: 0 .6rem 1rem;
  }

  .other {
    background-color: #fff;
    margin-top: 20px;
    /*no*/
    padding: 0 .6rem 1rem;
  }

  textarea {
    width: 90%;
    background-color: #f9f9f9;
    border: .025rem solid #eee;
    resize: none;
    min-height: 4.5rem;
    border-radius: .2rem;
    font-size: .6rem;
    color: #666;
    padding: .5rem;
  }

  .p1 {
    font-size: .45rem;
    color: #333;
    line-height: 1rem;
  }
  .submit{
    padding: 0.3rem;
    width: 100%;
    background-color: red;
    font-size: 0.5rem;
    box-sizing: border-box;
    color: white;
  }
</style>